<template>
  <div class="page">
    <div class="landDetail">
      <div class="back" @click="back()"><i class="el-icon-arrow-left"></i>返回</div>
      <landMap
        class="landMap"
        v-if="mapShow"
        :landDetailData="landDetail"
        ref="landMap"
      ></landMap>
      <div class="landMap" v-if="!mapShow">加载中...</div>
      <!-- 名称 -->
      <div class="landInfo">
        <div class="tit">
          <div class="landName">{{ landDetail.landName }}</div>
          <div class="landType">{{ landDetail.landType }}</div>
        </div>
        <div class="landArea">占地面积：{{ landDetail.landArea }}亩</div>
        <!-- 种植类型 -->
        <div class="plantType">
          <div class="plantList">
            <!-- 种植盒子 -->
            <div
              class="listBox"
              v-on:mouseover="handleMouseOver"
              v-if="landDetail.plantingVariety !== null"
            >
              <div class="listBox-l">
                <div class="pic">
                  <img :src="landDetail.pictureLink" alt="" />
                </div>
              </div>
              <div class="listBox-r">
                <div class="plantTit">{{ landDetail.plantingVariety }}</div>
              </div>
            </div>
            <!-- 触碰遮罩层 -->
            <div
              class="hoverBox"
              v-on:mouseleave="handleMouseLeave"
              v-if="hoverBoxVisible"
            >
              <!-- <div class="report">检测报告</div> -->
              <div class="operation">
                <div
                  class="recovery"
                  @click="harvestingDialogVisible = !harvestingDialogVisible,getSysSeed()"
                >
                  采收
                </div>
                <div class="moreOperation" @click="plantOver()" >结束种植</div>
              </div>
            </div>
            <div
              class="addType"
              v-if="landDetail.plantingVariety === null"
              @click="addPlantBtn()"
            >
              <div class="addIcon"><i class="el-icon-plus"></i></div>
              <div class="addText">添加品种</div>
            </div>
          </div>
        </div>
      </div>
      <!-- //下拉菜单 -->
      <!-- <div class="mune">
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon-menu"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus"
              >历史种养品种</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-circle-plus"
              >编辑地块</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-circle-plus-outline"
              >删除地块</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div> -->
    </div>
    <!-- 农事操作 -->
    <div class="farmOperation">
      <!-- 按钮 -->
      <div class="center">
        <div class="left-btn">
          <div
            class="agriMission"
            v-for="item in buttons"
            :key="item.id"
            :class="{ agriMissionActive: item.active }"
            @click="btnClick(item.id)"
          >
            {{ item.text }}
            <!-- <div v-if="item.active" class="btnClickImg">
              <img src="../../assets/iconImage/Frame 640.png" alt="" />
            </div> -->
          </div>
        </div>
        <div class="right-btn">
          <div v-if="tabId !== 2" class="addMission" @click="addMission(tabId)">
            <i class="el-icon-plus"></i>
            {{ tabId === 1 ? "记农事" : tabId === 3 ? "添加报告" : "" }}
          </div>
        </div>
      </div>
      <!-- tab切换内容 -->
      <div class="bottom">
        <!-- 农事组件 -->
        <argiMission
          v-if="tabId === 1"
          :landMissionData="landMissionData"
        ></argiMission>
        <!-- 土壤 -->
        <agriloil v-if="tabId === 3" :reportList="reportList"></agriloil>
        <!-- <div class="landLoil" >
          <div class="loil-l"></div>
          <div class="loil-r">
            <div class="operator">采样员：一号文</div>
            <div class="organization">检测机构：xx检测中心</div>
            <div class="date">2024-03-14</div>
            <div class="cost">费用：100</div>
          </div>
        </div> -->
      </div>
      <!-- 种植添加弹窗 -->
      <el-dialog
        title="种植添加"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose"
      >
        <seedAdd
          :sysSeedList="sysSeedList"
          :userList="userList"
          :landDetail="landDetail"
        ></seedAdd>
      </el-dialog>
      <!-- 检测报告 -->
      <el-dialog
        title="检测报告"
        :visible.sync="reportDialogVisible"
        width="width"
      >
        <div></div>
        <div slot="footer">
          <el-button @click="reportDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="reportDialogVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        title=""
        :visible.sync="harvestingDialogVisible"
        width="36vw"
      >
        <pick :userList="userList"></pick>
        <!-- <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import argiMission from './components/argiMission-components'
import seedAdd from './components/seedAdd.vue'
import agriloil from './components/agriloil'
import landMap from './components/map.vue'
import pick from './components/pick.vue'
import { getAgriListApi, getLandloilReportApi, endPlantingApi } from '@/api/mission'
import { getSysSonDictListApi, getUserListApi } from '@/api/dict'
import { getLandDetailApi } from '@/api/agriLand'
export default {
  name: 'agriLandDetail',
  components: {
    argiMission,
    seedAdd,
    agriloil,
    landMap,
    pick
  },

  data () {
    return {
      buttons: [
        { id: 1, text: '农事记录', active: false }, // 初始状态为未激活
        { id: 2, text: '农情感知', active: false },
        { id: 3, text: '土壤改良', active: false }
      ],
      tabId: 0,
      landMissionData: null,
      baseId: this.$route.query.baseId,
      seedingParams: {
        landId: this.$route.query.landId, // 从vuex取
        seedInfo: null,
        baseId: null, // 从vuex取
        seedType: null
      },
      params: {
        baseId: this.$route.query.baseId, //
        landId: this.$route.query.landId
      },
      dialogVisible: false, // 种养品种弹窗
      reportDialogVisible: false, // 报告
      sysSeedList: [],
      userList: [],
      hoverBoxVisible: false, //
      landDetail: {},
      mapShow: false,
      harvestingDialogVisible: false
    }
  },

  mounted () {
    this.getAgriList(this.params)
    // this.getSysSeed()
    this.$store.dispatch('mission/removemissionDetail')
    this.getLandloilReport(this.params).then(() => {
      this.mapShow = true
    })
  },
  created () {
    this.getLandDetail(this.params)
  },

  methods: {
    // 结束种植
    plantOver () {
      this.$confirm('此操将结束该地快的种植, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        endPlantingApi(this.landDetail).then(() => {
          this.$message({
            type: 'success',
            message: '结束成功!'
          })
          // this.getAgriList(this.params)
          this.$router.go({ path: this.$route.path })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 添加种植物
    addPlantBtn () {
      this.dialogVisible = true
      this.getSysSeed()
    },
    // 种植类型触碰事件
    handleMouseOver () {
      this.hoverBoxVisible = true
    },
    // 进入页面调地块详情
    async getLandDetail (params) {
      const res = await getLandDetailApi(params)
      console.log(res)
      this.landDetail = res.data[0]
    },
    handleMouseLeave () {
      this.hoverBoxVisible = false
    },
    // tab按钮
    btnClick (id) {
      // console.log(this.landDetail, '详情页')
      // console.log(id)
      this.tabId = id
      const button = this.buttons.find((btn) => btn.id === id)
      button.active = true // 标记按钮为激活状态
      // 取消其他按钮的激活状态和字体大小
      this.buttons.forEach((btn) => {
        if (btn.id !== id) {
          btn.active = false
        }
      })
    },
    // 农事任务
    async getAgriList (params) {
      const res = await getAgriListApi(params)
      this.landMissionData = res.data
      this.btnClick(1)
    },
    // 播种字典表
    async getSysSeed () {
      const res = await getSysSonDictListApi('ZZZL')
      // console.log(res)
      this.sysSeedList = res.data
      const res2 = await getUserListApi(this.baseId)
      // console.log(res2)
      this.userList = res2.data
    },
    // 跳转农事页新增
    addMission (id) {
      if (id === 1) {
        this.$router.push({
          path: '/shuzhongtian/agriMissionAdd',
          query: {
            ...this.$route.query
          }
        })
      } else if (id === 3) {
        this.$router.push({
          path: '/shuzhongtian/addLoilReport',
          query: {
            ...this.$route.query
          }
        })
      }
    },
    // 土壤检测list
    async getLandloilReport (params) {
      const res = await getLandloilReportApi(params)
      this.reportList = res.data
    },
    // 弹窗事件
    handleClose (done) {
      done()
    },
    // 返回
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriLand'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// .page {
// @media screen and (max-width: 1450px) {}
// }
.landDetail {
  width: 80.2083vw;
  height: 4.25rem * 0.834;
  background: #ffffff;
  border-radius: 0.15rem 0.15rem 0.15rem 0.15rem;
  // margin: 0 auto;
  padding: 0.4rem 0.3rem;
  display: flex;
  position: relative;
  .back {
    position: absolute;
    top: 1.0417vw;
    cursor: pointer;
    font-size: 24px;
  }
  .landMap {
    margin-top: 1.5625vw;
    width: 22.2396vw;
    height: 11.4583vw * 0.834;
    background: #edf1f4;
    border-radius: 12px 12px 12px 12px;
  }
  .tit {
    display: flex;
    margin-left: 0.4rem;
    .landName {
      margin-right: 0.15rem;
      height: 0.56rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 0.4rem;
      color: #2a2a31;
      line-height: 0.47rem;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .landType {
      width: 0.65rem;
      height: 0.4rem;
      background: #28bd87;
      border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
      text-align: center;
      color: #fff;
      font-size: 0.16rem;
      line-height: 0.4rem;
    }
  }
  .landArea {
    margin-left: 0.4rem;
    margin-bottom: 0.35rem;
    margin: 0.15rem 0 0.35rem 0.4rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 0.25rem;
    color: #475852;
    line-height: 0.29rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .plantType {
    margin-left: 0.4rem;
    display: flex;
    .plantList {
      width: 12.15rem;
      height: 1.65rem;
      background: #fff;
      border-radius: 0.15rem 0.15rem 0.15rem 0.15rem;
      display: flex;
      overflow-x: auto;
      .listBox {
        width: 16.6667vw;
        height: 6.25vw * 0.834;
        margin-left: 0.125rem;
        background: #f6f6f6;
        border-radius: 0.15rem 0.15rem 0.15rem 0.15rem;
        display: flex;
        flex-shrink: 0;
        .listBox-l {
          .pic {
            width: 1rem;
            height: 1rem;
            margin: 0.15rem;
            img {
              width: 1rem;
              height: 1rem;
              border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
            }
          }
        }
        .listBox-r {
          .plantTit {
            margin-top: 0.26rem;
          }
        }
      }
    }
    .hoverBox {
      position: absolute;
      width: 16.6667vw;
      margin-left: 0.125rem;
      height: 6.25vw * 0.834;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 12px 12px 12px 12px;
      color: #fff;
      padding: 1.0417vw;
      .report {
        margin-top: 1.0417vw;
        font-size: 0.8333vw;
        width: 5.2083vw;
        height: 1.5625vw * 0.834;
        background: #19b560;
        border-radius: 8px 8px 8px 8px;
        text-align: center;
        line-height: 1.5625vw * 0.834;
        cursor: pointer;
      }
      .operation {
        width: 8vw;
        font-size: 0.8333vw;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 10%;
        right: 10%;
        .recovery {
          cursor: pointer;
        }
        .moreOperation {
          cursor: pointer;
        }
      }
    }
    .addType {
      width: 1.3rem;
      height: 1.3rem;
      margin-left: 0.1rem;
      background: #eff4f4;
      border-radius: 0.15rem 0.15rem 0.15rem 0.15rem;
      border: 0.01rem solid #475852;
      text-align: center;
      .addIcon {
        margin-top: 20%;
      }
    }
  }
}
.farmOperation {
  width: 80.2083vw;
  height: 29.6875vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  margin: 1.0417vw 0 0;
  padding: 1.0417vw;

  .center {
    display: flex;
    justify-content: space-between;
    // margin: 1.0417vw 0;
    .left-btn {
      display: flex;
      // 农事记录
      .agriMission {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 1.25vw;
        color: #333333;
        line-height: 0.26rem;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 6.25vw;
      }
      .agriMissionActive {
        height: 2.6042vw;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 1.25vw;
        color: #28bd87;
        line-height: 0.35rem;
        text-align: left;
        font-style: normal;
        text-transform: none;
        border-bottom: 4px solid #28bd87;

        img {
          width: 1.2rem;
          height: 0.23rem;
        }
      }
    }
    .right-btn {
      display: flex;
      .agriMaterials {
        width: 1.38rem;
        height: 0.6rem;
        background: linear-gradient(270deg, #2bbf64 0%, #7ebf2b 100%);
        border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
        text-align: center;
        line-height: 0.6rem;
        margin-right: 0.1rem;
        color: #fff;
      }
      .addMission {
        width: 1.38rem;
        height: 0.6rem;
        background: linear-gradient(270deg, #2bbf64 0%, #7ebf2b 100%);
        border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
        text-align: center;
        line-height: 0.6rem;
        color: #fff;
      }
    }
  }
  .bottom {
    margin-top: 0.4rem;
    height: 38vh;
    overflow-y: auto;
  }
}

.landLoil {
  width: 14rem;
  height: 2rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  .loil-l {
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
  }
}
</style>
